<template>
  <div class="home">
    <Main>
      <a-carousel effect="fade" :autoplay="true">
        <div><Hadoop class="hadoop"></Hadoop></div>
        <div><Spark class="spark"></Spark></div>
        <div><Hadoop class="hadoop"></Hadoop></div>
      </a-carousel>
      <a-row
        type="flex"
        justify="space-between"
        align="bottom"
        style="width: 80%; max-width: 1800px; margin: 30px auto"
      >
        <a-col
          class="detail"
          v-for="(detail, index) in details"
          :key="index"
          :span="4"
          @click="choose(detail.name)"
          style="margin: 20px auto"
        >
          <p class="title">
            {{ detail.title }}
          </p>
          <p class="describe">
            {{ detail.describe }}
          </p>
        </a-col>
      </a-row>
    </Main>
  </div>
</template>

<script>
import Main from "@/components/Main.vue";
import Hadoop from "@/components/svg/Hadoop.vue";
import Spark from "@/components/svg/Spark.vue";

export default {
  name: "Home",
  components: {
    Main,
    Hadoop,
    Spark,
  },
  data() {
    return {
      Height: 0,
      details: [
        {
          name: "Hadoop",
          title: "Hadoop集群服务器",
          describe:
            "分布式文件系统,HDFS海量数据的存储和MapReduce海量数据的计算",
        },
        {
          name: "Spark",
          title: "Hadoop集群服务器",
          describe:
            "分布式文件系统,HDFS海量数据的存储和MapReduce海量数据的计算",
        },
        {
          name: "mongoDB",
          title: "Hadoop集群服务器",
          describe:
            "分布式文件系统,HDFS海量数据的存储和MapReduce海量数据的计算",
        },
        {
          name: "mongoDB",
          title: "Hadoop集群服务器",
          describe:
            "分布式文件系统,HDFS海量数据的存储和MapReduce海量数据的计算",
        },
      ],
    };
  },
  methods: {
    choose(name) {
      switch (name) {
        case "Hadoop":
          this.$router.push({ path: "/hadoop" });
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped>
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 350px;
  line-height: 160px;
  background: #9ba7b8;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide .hadoop {
  margin-top: 60px;
}

.ant-carousel >>> .slick-slide .spark {
  margin-top: 40px;
}

#v-content {
  overflow: hidden;
}

.detail {
  width: 350px;
  height: 280px;
  border: 3px solid #dbdbdb;
  border-radius: 15px;
  margin: 10px 10px;
}

.detail:hover {
  cursor: pointer;
  border: 1px solid #ff6a00;
}

.title {
  color: #181818;
  font-size: 18px;
  font-weight: 600;
  float: left;
  margin: 0;
  text-align: left;
  margin: 20px 0 0 30px;
}

.describe {
  text-align: left;
  float: left;
  margin: 10px 0 0 30px;
}
</style>